import React from "react";
import { Draggable } from "react-beautiful-dnd";
import { TaskType } from "../state/initial-data";
import { TaskCon } from "./lib";

export const Task = ({ task, index }: { task: TaskType; index: number }) => {
  return (
    <Draggable draggableId={task.id} index={index}>
      {(provided, snapshot) => {
        return (
          <TaskCon
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            isDragging={snapshot.isDragging}
          >
            {task.content}
          </TaskCon>
        );
      }}
    </Draggable>
  );
};
